
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../../style/layui-v2.5.6/layui/css/layui.css">
</head>
<style>
    h1{
        text-align: center;
        margin-bottom: 10px;
        font-weight:bold;
        font-size:30px;
    }
    #mor_btn{
        margin-left: 20px;
        background: #f58f98;
        border-radius: 8px;
        color: #FBFBFB;
        width:70px;
        height:30px;
    }
    .tijiao_btn{
        text-align: center;
    }

</style>
<body style="background: #FBFBFB">
   <h1>用户地址管理</h1>
    <form class="layui-form" id="addCustomer_addr-form" lay-filter="addCustomer_addr-form">

        <div class="layui-form-item">
            <label class="layui-form-label">省份：</label>
            <div class="layui-input-block">
                <select name="province" id="province" lay-verify="required" lay-filter="province">
                    <option>--请选择省--</option>
                </select>
            </div>
        </div><br>
        <div class="layui-form-item">
            <label class="layui-form-label">城市：</label>
            <div class="layui-input-block">
                <select name="city" id="city" lay-filter="city">
                    <option>--请选择市--</option>
                </select>
            </div><br>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">地区：</label>
            <div class="layui-input-block">
                <select name="district" id="district">
                    <option>--请选择地区--</option>
                </select>
            </div><br>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">详细地址：</label>
            <div class="layui-input-block">
                <input name="address" required lay-verify="required" class="layui-input" placeholder="请输入详细地址">
            </div><br>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮编：</label>
            <div class="layui-input-block">
                <input name="zip" required lay-verify="required" class="layui-input" placeholder="请输入邮编">
            </div><br>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">默认：</label>
            <div class="layui-input-block">
                <input type="radio" name="is_default" value="1" title="是">
                <input type="radio" name="is_default" value="2" title="否">
            </div>
        </div>
        <div class="tijiao_btn">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="addFormFilter">提交添加</button>
        </div>
    </form>





<%--   表格 --%>
   <div style="font-size: 10px">
       <table id="CustomerAddr-tab" lay-filter="test"></table>
   </div>
<%-- 按钮 --%>
   <script id="tab-toolbar" type="text/html">
       <button class="layui-btn layui-btn-danger" lay-event="delete">删除</button>
       <button class="layui-btn" lay-event="add">添加</button>
   </script>
<%--默认按钮   event事件绑定  {{# js代码 }} --%>
   <script id="barDemo" type="text/html">
       {{#  if(d.is_default == 2){ }}
       <button class="layui-btn layui-btn-danger" lay-event="update" id="mor_btn">默认</button>
       {{#  } }}
   </script>

    <script src="../../style/layui-v2.5.6/layui/layui.js"></script>
    <script type="text/javascript" src ="../../style/js/jquery-3.3.1.js"></script>
    <script>
        $("#addCustomer_addr-form").hide();
        layui.use(['form','layer','table'], function () {
            var form = layui.form;
            var layer = layui.layer;//弹出层
            var table = layui.table;//表格
            // 入口函数
            $(function () {
                var html = selChina(0);
                $("#province").html(html);
                // 重新渲染layui下拉框
                form.render('select');
            });

            // 监听省份选择 select(过滤条件)
            // 每次省份下拉框有变动都会触发函数
            form.on('select(province)', function (data) {
                // 获取省份id值，通过该省份的id查询该省下有哪些城市
                var html = selChina(data.value);//得到被选中的值
                // 把拼接好的<option>标签写入到城市的下拉框中
                $("#city").html(html);
                // 重新渲染下拉框
                form.render('select');
            });

            // 监听城市选择
            form.on('select(city)', function (data) {
                var html = selChina(data.value);//得到被选中的值
                $("#district").html(html);
                form.render('select');
            });

            //动态加载中国地区下拉列表
            function selChina(pid) {
                var html = "";
                // 加载省份信息
                $.ajax({
                    type: "post",
                    url: "../../China/selChina.do",
                    data: {"pid": pid},
                    async: false,
                    dataType: "json",
                    success: function (json) {
                        var data = json.data;
                        for (var i = 0; i < data.length; i++) {
                            html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
                        }
                    }
                });
                return html;
            }


            // 用户地址查询展示
            table.render({
                elem: '#CustomerAddr-tab'
                , height: 530
                , url: '../../CustomerAddr/selCustomerAddr.do' //数据接口
                , toolbar: "#tab-toolbar"
                ,skin:'line'//边框风格
                , page: true //开启分页
                , cols: [[ //表头
                    {checkbox: true},
                    {field: 'customer_addr_id', title: 'ID', width: 100, sort: true}
                    ,{field: 'customerLogin', title: '用户账号', width: 100, sort: true,templet:function(d){
                                return d.customerLogin.loginName;
                            }}
                    ,{field: 'zip', title: '邮编', width: 100, sort: true}
                    ,{field: 'province', title: '省份', width: 100, sort: true,templet:function(d){
                            return d.addrMap.province.name;
                        }}
                    ,{field: 'city', title: '城市', width: 130, sort: true,templet:function(d){
                            return d.addrMap.city.name;
                        }}
                    ,{field: 'district', title: '区县', width: 100, sort: true,templet:function(d){
                            return d.addrMap.district.name;
                        }}
                    ,{field: 'address', title: '具体地址门牌号', width: 150, sort: true}
                    ,{field: 'is_default', title: '是否默认', width: 150, sort: true,templet:function(d){
                                //是否默认
                                if(d.is_default==1)
                                    return "是";
                                return "否";

                            }}
                    ,{field: 'modified_time', title: '最后修改时间', width: 200, sort: true}
                    //这里的toolbar值是script标签的id选择器
                    ,{fixed: 'right', width:120, align:'center', toolbar: '#barDemo'}
                ]]
            });
            //监听事件 test是表格的lay-filter值
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'delete':
                        // 获取选中的行对象
                        var data = table.checkStatus("CustomerAddr-tab").data;
                        // 把多个id拼接
                        var ids = "";
                        for (var i = 0; i < data.length; i++) {
                            ids += data[i].customer_addr_id + ",";
                        }
                        // 调用ajax到后台执行删除
                        $.ajax({
                            type: "post",
                            url: "../../CustomerAddr/delCustomerAddr.do",
                            data: {"ids": ids},
                            dataType: "json",
                            success: function (data) {
                                layer.msg(data.msg);
                                table.reload("CustomerAddr-tab");
                            }
                        });
                        break;
                    case 'search':
                        break;
                    case 'add':
                        index = layer.open({
                            type: "1",
                            title: "添加窗口",
                            area: ['400px', '500px'],
                            content: $("#addCustomer_addr-form"),
                            //刷新弹出层数据
                            end: function () {
                                location.reload();
                            },
                        });
                        break;
                }
            });
            // 添加地址信息
            form.on('submit(addFormFilter)', function (data) {
                // layui获取表单的所有元素的值
                var data1 = form.val("addCustomer_addr-form");
                // 使用ajax提交表单
                $.ajax({
                    type: "post",
                    url: "../../CustomerAddr/addCustomerAddr.do",
                    data: data1,
                    dataType: "json",
                    success: function (data) {
                        layer.msg(data.msg);
                        //关闭弹出层
                        layer.close(index);
                        table.reload("CustomerAddr-tab");
                    }
                });//如果不写，会使layer表单失效
                return false;
            });

            //行工具
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

                if(layEvent === 'update'){
                    //把要修改的id传到后台
                    $.ajax({
                        type:"post",
                        url:"../../CustomerAddr/updCustomerAddr.do",
                        data:{"id":data.customer_addr_id},
                        dataType:"json",
                        success:function(json){
                            layer.msg(json.msg);
                            table.reload("CustomerAddr-tab");
                        }
                    })
                }
            });

        });
    </script>
</body>
</html>
